.avatar {
    position: relative;

    > img {
        width: 100%;
    }

    // Different resolutions
    &.avatar-low {
        > img {
            border-radius: 50%;
            background-color: #ffffff;
            width: 48px;
            height: 48px;
        }
    }

    &.avatar-high {
        max-width: 540px;
        max-height: 540px;
    }

    // Loading indicator
    &.is-loading {
        &.avatar-high {
            // Show default blured
            > img {
                border-radius: 0;
                filter: blur(40px);
            }
        }

    }

    .avatar-loading {
        $thickness: 10px;
        $circle-diameter: 160px;
        @include loading-spinner(
            $circle-diameter - $thickness * 2,
            $thickness,
            rgba(255, 255, 255, .87),
            rgba(255, 255, 255, .1)
        );
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;

        > :first-child {
            position: relative;
            top: calc(50% - #{$circle-diameter / 2});
            left: calc(50% - #{$circle-diameter / 2});
        }
    }

    // Indicators depending on identity type (e.g. Work suitcase)
    .work-indicator,
    .home-indicator {
        $indicator-size: 18px;
        position: absolute;
        top: 48px - $indicator-size;

        img {
            width: $indicator-size;
            height: $indicator-size;
        }
    }

    // If a receiver is "blocked"
    .blocked-indicator {
        $indicator-size: 18px;
        position: absolute;
        top: 48px - $indicator-size;
        right: 0;

        img {
            width: $indicator-size;
            height: $indicator-size;
        }
    }

}
